<template>
    <el-card class="action-bar">
        <div class="action-buttons">
            <el-button type="text" class="action-button" @click="handleLike">
                <el-icon :size="24">
                    <LikeIcon :color="likeColor" />
                </el-icon>
                <span class="action-text">{{ likeCount }}</span>
            </el-button>

            <el-button type="text" class="action-button" @click="handleFavorite">
                <el-icon :size="24">
                    <FavoriteIcon :color="favoriteColor" />
                </el-icon>
                <span class="action-text">收藏</span>
            </el-button>

            <el-button type="text" class="action-button" @click="handleShare">
                <el-icon :size="24">
                    <ShareIcon />
                </el-icon>
                <span class="action-text">分享</span>
            </el-button>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import FavoriteIcon from '@/icons/FavoriteIcon.vue';
import LikeIcon from '@/icons/likeIcon.vue';
import ShareIcon from '@/icons/ShareIcon.vue';
import { computed, ref } from 'vue';

const props = defineProps<{
    blogId: number
    isLike: boolean
    likeCount: number
    isFavorited: boolean
}>();

const emit = defineEmits<{
    'like-blog': []
}>();

const likeColor = computed(() => {
    return props.isLike ? "#1296db" : "#8a8a8a";
})

const favoriteColor = computed(() => {
    return props.isFavorited ? "#1296db" : "#8a8a8a";
})

// 处理函数 - 后续实现具体逻辑
const handleLike = () => {
    emit('like-blog')
};

const handleFavorite = () => {
};

const handleShare = () => {
    navigator.clipboard.writeText(window.location.href)
};
</script>

<style scoped>
.action-bar {
    width: 600px;
    margin: 5px auto;
}

.action-buttons {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.action-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
}

.action-button:hover {
    background-color: #f5f5f5;
    border-radius: 8px;
}

.action-text {
    font-size: 14px;
    color: #666;
    margin-top: 4px;
}

.el-icon {
    transition: transform 0.2s ease;
}

.action-button:hover .el-icon {
    transform: scale(1.1);
}
</style>